<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>
</head>

<body style="background-color: #fff;">
    <div class="pd12">
        <div class="top flex_x start ">
            <a href="./filigt.html" style="width: 20px;"><img src="./static/image/left.png" alt=""></a>
            <span style="margin-left: 42vw;">Flight details </span>
        </div>
        <div class="flex_x between t_list">
            <div class="d_left">
                <div class="t">Bei Jing</div>
                <div class="d">DaXing T2</div>
                <img src="./static/image/f.png" class="f" alt="">
                <div class="s">6h 0m</div>
                <div class="t" style="margin-top: 14px;">Kuala Lumpur</div>
                <div class="d">Kuala Lumpur T2</div>
                <div class="d" style="margin-top: 15px;">Depart</div>
                <div class="t">08:25 AM</div>
                <div class="d" style="margin-top: 27px;">Flight No</div>
                <div class="t">MF832</div>
                <div class="d" style="margin-top: 42px;">Traveller</div>
                <div class="t sl1">00</div>
                <div class="d" style="margin-top: 42px;">Seat No</div>
                <div class="t sl2">00</div>
                <div class="d" style="margin-top: 42px;">Ticket Price</div>
                <div class="t">RM 50</div>
            </div>
            <div class="d_right pos_r">
                <div class="c c1 pos_a"></div>
                <div class="c c2 pos_a"></div>
                <div class="c c3 pos_a"></div>
                <div class="c c4 pos_a"></div>
                <div class="c c5 pos_a"></div>
                <div class="c c6 pos_a"></div>
                <div class="r_title">Economy Class</div>
                <div class="r_desc">Select a seat</div>
                <div class="k_list flex_x between">
                    <div class="k_left flex_x start">
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks k_active"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                    </div>
                    <div class="k_right flex_x start">
                        <div class="ks k_active"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks k_active"></div>
                        <div class="ks k_active"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks select"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                        <div class="ks"></div>
                    </div>
                </div>
            </div>
        </div>
        <a href="./addcard.html">
            <div class="check">
                Checkout
            </div>
        </a>
    </div>
</body>
<script>
    gsap.from(".top  img", {
        duration: .5,
        y: 100,
        x: 100
    });
    $(function(){
        $('.select').click(function(){
            $('.sl1').html('03')
            $('.sl2').html('07')
        })
    })
</script>
<style>
    .top img {
        width: 8px;
        height: 11px;
        margin-right: 115px;
    }

    .top {
        font-size: 15px;
        align-items: center;
    }

    .t {
        color: #674D2F;
        font-size: 20px;
        font-weight: 400;
    }

    .d_left {
        text-align: center;
    }

    .d {
        color: #B0A394;
        font-size: 15px;
    }

    .t_list {
        margin-top: 100px;
    }

    .f {
        width: 20px;
        height: 20px;
        margin-top: 19px;
    }

    .s {
        color: #D9D9D9;
        font-size: 10px;
    }

    .d_right {
        padding: 15px;
        box-sizing: border-box;
        width: 217px;
        height: 566px;
        width: 217px;
        height: 566px;
        border-radius: 15px;
        background: #FE9F35;
        text-align: center;
    }

    .r_title {
        color: #FFF;
        font-size: 15px;
    }

    .r_desc {
        color: #F4D5C7;
        font-size: 12px;
        margin-top: 6px;
    }

    .ks {
        width: 30px;
        height: 41px;
        border-radius: 7px;
        border: 2px solid #F4DAC7;
        margin-right: 7px;
        margin-bottom: 4px;
        box-sizing: border-box;

    }

    .k_list {
        margin-top: 7px;
    }

    .k_left,
    .k_right {
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
    }

    .k_active {
        background: #F4DAC7;
    }

    .c {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: #fff;

    }

    .c1 {
        left: -11px;
        top: 76px;
    }

    .c2 {
        right: -11px;
        top: 76px;
    }

    .c3 {
        left: -11px;
        top: 255px;
    }

    .c4 {
        right: -11px;
        top: 255px;
    }

    .c5 {
        left: -11px;
        bottom: 76px;
    }

    .c6 {
        right: -11px;
        bottom: 76px;
    }

    .check {
        width: 309px;
        height: 50px;
        margin-top: 40px;
        border-radius: 11px;
        background: #FFEAD4;
        text-align: center;
        line-height: 50px;
        margin: 40px auto;
        color: #FF8906;
        font-size: 18px;
        font-weight: 500;
    }
    .select:hover{
        border: none;
        background: #F97C36;
        box-sizing: border-box;
    }
</style>

</html>